<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		h1{
			text-align: center;
		}
		/* #box{
			width:1000px;
			border: solid 1px #483D8B;
			position: absolute;
			top:40%;
			 */
		
		
		table{
			width: 1000px;
			height: 50px;
			position: absolute;
			left:25%;
		}
		tr{
			text-align: center;
			font-weight: 900;
			font-size:24px;
		}
		#begin{
			position: absolute;
			left:40%;
			top:50%;
			width: 100px;
			height: 60px;
		}
		#end{
			position: absolute;
			left:55%;
			top:50%;
			width: 100px;
			height: 60px;
		}
		
			
		</style>
	</head>
	<body>
		<h1>随机抽签</h1>
		<button id='begin'>点击开始</button>
		<button id='end'>点击结束</button>
<!-- 		<div id="box">
		<span>第一组</span>
		<span>第二组</span>
		<span>第三组</span>
		<span>第四组</span>
		<span>第五组</span>
		<span>第六组</span>
		<span>第七组</span>
		<span>第八组</span>
		<span>第九组</span>
		<span>第十组</span>
		</div> -->
		<p id="ra"></p>
		<table>
			<tr>
				<td id="td1"></td>
				<td id="td2"></td>
				<td id="td3"></td>
				<td id="td4"></td>
				<td id="td5"></td>
				<td id="td6"></td>
				<td id="td7"></td>
				<td id="td8"></td>
				<td id="td9"></td>
				<td id="td10"></td>
			</tr>
			<tr>
				<td>第一组</td>
				<td>第二组</td>
				<td>第三组</td>
				<td>第四组</td>
				<td>第五组</td>
				<td>第六组</td>
				<td>第七组</td>
				<td>第八组</td>
				<td>第九组</td>
				<td>第十组</td>
			</tr>
		</table>
		<script>
		const a = document.getElementById('begin');
		const b = document.getElementById('end');
		const c = document.getElementById('ra');
		var num=0;
		var Array=[];
		console.log(Array.length);
		var key = 0;
		
			a.onclick=function(){
				if(key==0){
				  num++;
				  key=1;
				  document.getElementById('ra').style.display='block';
					var myset = setInterval(aa,50);
				
					b.onclick=function(){
						if(Array.length==10){
							clearInterval(myset);
							return null;
						}
						if(key==1){
							key=0;
						clearInterval(myset);
						document.getElementById('ra').style.display='none';
						console.log(parseInt(c.innerHTML)+"aa");
						var x = parseInt(c.innerHTML);
						for(var i=0;i<=Array.length;i++){
							if(x==Array[i]){
								x++;
								i=-1;
								if(x>10){
									x=x-10;
									i=-1;
								}
							}
						}
						Array.push(x);
						//myfun(Array);
						console.log(x);
						//var idname ="'td"+num+"'";
						//var d=document.getElementById(idname);
						console.log(num);
						var d=document.getElementById("td"+num);
						console.log(d);
						d.innerHTML=x;
					
					}else{
						console.log("你别瞎点啊");	
					}
				}
					
			}else{
				console.log("你要把我气死 别瞎点");
				clearInterval(myset);
			}
		}
		 
		
		
		function aa(){
			const shu = Math.floor(Math.random()*10+1);
			
			console.log(shu);
			c.innerHTML=shu;
			//document.write(shu);
		}
		function myfun(a){
			for(var i=0;i<a.length-1;i++){
			    for(var j=i+1;j<a.length;j++){
			        if (a[i]>a[j]){
			            var temp=a[i];
			            a[i]=a[j];
			            a[j]=temp;
			           }
			       }
			 }
		return a;
		}
		//var shuzu=[1,2,3,4,5,6,7,8,9]
		//var shu = Math.floor(Math.random()*10+0);
		/* var Array=new Array("c1","c2","c3","c4","c5");
					var i=Math.round(Math.random()*Array.length-1);
					document.write("The lucky dog is:"+Array[i]+"<br />"); */
		</script>
		<style>
		p{
			position: absolute;
			text-align: center;
			color: red;
			font-size: 144px;
			top:30%;
			left:47%;
		}
		</style>
	</body>
</html>
